<template>
  <div>
    <Header></Header>

    <div class="block">
      <div class="filter-container">
        <el-select style="width: 200px;" v-model="pagination.title" placeholder="请选择类别">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input placeholder="描述" v-model="pagination.description" style="width: 200px;" class="filter-item"></el-input>
        <el-input placeholder="内容" v-model="pagination.content" style="width: 200px;" class="filter-item"></el-input>
        <el-button @click="page()" type="primary">查询</el-button>
      </div>
      <el-timeline>
        <el-timeline-item placement="top" v-for="blog in blogs" :key="blog.id">
          <el-card>
            <h4 @click="goDetail(blog.id)">
              {{blog.title}}
            </h4>
            <p>{{blog.description}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-pagination class="mpage" background layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="pageSize" @current-change=page>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
export default {
  name: 'Blogs',
  components: { Header },
  data() {
    return {
      blogs: {},
      currentPage: 1,
      total: 0,
      pageSize: 5,
      pagination: {
        title: '',
        description:'',
        content: '',
        id: ''
      },
      params: '',
      options: [{
          value: '书籍',
          label: '书籍'
        }, {
          value: '博客',
          label: '博客'
        }, {
          value: '视频',
          label: '视频'
        }, {
          value: '资源',
          label: '资源'
      }],
    }
  },
  created() {
    this.page(1)
  },
  methods: {
    page(currentPage = 1) {
      this.currentPage = currentPage
      this.params = '?title=' + this.pagination.title
      this.params += '&description=' + this.pagination.description
      this.params += '&content=' + this.pagination.content
      // console.log(this.params);
      const _this = this
      _this.$axios.get('/api/blogs/' + this.currentPage + '/' + this.pageSize + this.params).then(res => {
        // console.log(res.data)
        _this.blogs = res.data.data.records
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
        _this.id = res.data.data.id
      })
    },
    goDetail(id) {
      this.$router.push({
        name: 'BlogDetail',
        params: { blogId: id }
      })
    }
  }
}
</script>

<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}
.filter-container {
  text-align: center;
}
</style>